import React, { Component } from 'react';
import { createPortal } from 'react-dom';
import ReactEcharts from 'echarts-for-react';
import darkEchartsTheme from '../../config/theme/darkEchartsTheme';
import echarts from 'echarts';

const modalRoot = document.getElementById('dialog-root');

class IndustrymapDevelopNumMiddleChart extends Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('technologyCollegeNumChart');
    this.state = {
      chartOption: undefined,
      chartHeight: 250,
    };
  }
  componentDidMount() {
    modalRoot.appendChild(this.el);
    echarts.registerTheme('theme_name', darkEchartsTheme);
    this.setChartData();
  }
  setChartData() {
    const data = [
      { name: '装备制造', value: 27 },
      { name: '电子信息', value: 13 },
      { name: '新材料', value: 12 },
      { name: '汽车', value: 12 },
      { name: '医药', value: 11 },
      { name: '精密机械', value: 4 },
      { name: '化工', value: 4 },
      { name: '纺织', value: 4 },
      { name: '通用设备', value: 3 },
      { name: '食品', value: 3 }
    ];

    const option = {
      tooltip: {
        trigger: 'item',
        showContent: true,
        formatter: '{b}: {c}',
        backgroundColor: '#333'//悬浮框背景色设置
      },

      series: [{
        type: 'treemap',
        width: '100%',
        height: '100%',
        roam: false, //是否开启拖拽漫游（移动和缩放）
        nodeClick: false, //点击节点后的行为,false无反应
        breadcrumb: {
            show: false
        },
        label: { //描述了每个矩形中，文本标签的样式。
            normal: {
                show: true,
                fontSize:14,
            }
        },
        itemStyle: {
            normal: {
                show: true,
                textStyle: {
                    color: '#fff',
                    fontSize: 14,
                },
                borderWidth: 1,
                borderColor: 'rgba(255,255,255,0.2)',
                colorAlpha:0.8
            },

            emphasis: {
                label: {
                    show: true
                }
            }
        },
        data: data
    }]
    };
    this.setState({ chartOption: option });
  }

  render() {
    const { style, width, height } = this.props;
    const dtTitle = `国家开发区主导产业 TOP10`;
    const { chartOption } = this.state;
    return createPortal(
      <div
        style={{
          ...style,
          display: 'flex',
          flexDirection: 'column',
          width: width,
          height: height,
          color: '#fff',
          backgroundColor: 'rgba(0,0,0,0.6)',
          boxShadow: '0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23)',
        }}
      >
        <div
          style={{
            lineHeight: '35px',
            height: 35,
            borderBottom: '1px solid rgb(238, 238, 238,0.2)',
            textAlign: 'center',
            fontWeight: 'bold'
          }}
        >
          <div style={{ float: 'left', marginLeft: 6, fontSize: 15 }}><div style={{ float: 'left', width: 5, height: 35, marginRight: 10, backgroundColor: 'rgba(63,177,277,1)', }} />{dtTitle}</div>
          <div style={{ float: 'right', marginRight: 8 }}>
          </div>
        </div>
        <div style={{ margin: '3px 8px 3px 8px' }}>
          <div>
            {chartOption !== undefined && (
              <ReactEcharts
                option={chartOption}
                notMerge={true}
                lazyUpdate={true}
                theme={'theme_name'}
                style={{ height: this.state.chartHeight }}
              />
            )}
          </div>
        </div>
      </div>,
      this.el
    );
  }
}

export default IndustrymapDevelopNumMiddleChart;
